<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海蓝之谜 Bootstrap网页</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/script.js"></script>

</head>

<body>

    <body>
        <!--第一部分：导航栏开始-->
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Togglenavigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"
                        style="font-size: 32px;color: #000;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">
                        LA MER
                    </a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">精华面霜 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">畅销榜单 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">面部护理 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">修护底妆 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">臻享套装 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">精选系列 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">臻享荟 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">品牌探索 <span class="sr-only">(current)</span></a></li>
                    </ul>

                </div>
            </div>
        </nav>
        <!--第一部分：导航栏结束-->
        <!--第二部分：轮播图区域开始-->
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                <li data-target="#carousel-example-generic" data-slide-to="4"></li>


            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="item active" style="width: 1500px;margin: 0 auto;">
                    <img src="images/01.png" alt="...">
                </div>

                <div class="item " style="width: 1500px;margin: 0 auto;">
                    <img src="images/02.png" alt="...">
                </div>

                <div class="item " style="width: 1500px;margin: 0 auto;">
                    <img src="images/03.png" alt="...">
                </div>

                <div class="item " style="width: 1500px;margin: 0 auto;">
                    <img src="images/04.png" alt="...">
                </div>

                <div class="item " style="width: 1500px;margin: 0 auto;">
                    <img src="images/05.png" alt="...">
                </div>


            </div>
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <!--第二部分：轮播图区域结束-->
        <!--内容-->
        <div class="container">
            <div class="row" style="margin-top:15px ;">
                <div class="col-lg-3"></div>
                <div class="col-lg-6">
                    <h1 style="margin-left: 210px;">畅销榜单</h1>
                    <p style="margin-left: 210px;">万众挚爱口碑星品 满足您护肤的不同需求</p>
                </div>
                <div class="col-lg-3"></div>
            </div>
            <div class="row" style="background-color: #fff;">
                <div class="col-lg-4">
                    <img src="images/a.png" alt="" style="margin-top:20px;">
                    <h3 style="margin-top:10px;color: #000;">Crème de la Mer<br>海蓝之谜经典精华面霜<br>丰盈质地 经典奢华<br> ¥850 起 / 4
                        种规格 </h3>
                </div>
                <div class="col-lg-4">
                    <img src="images/b.png" alt="" style="margin-top:20px;">
                    <h3 style="margin-top:10px;color: #000;margin-left: 65px;">The Treatment
                        Lotion<br>海蓝之谜沁润修护精萃水<br>元能修护 年轻觉醒<br>¥900 起
                        / 2 种规格</h3>
                </div>
                <div class="col-lg-4">
                    <img src="images/c.png" alt="" style="margin-top:20px;">
                    <h3 style="margin-top:10px;color: #000;margin-left: 65px;">The Concentrate<br>海蓝之谜浓缩修护精华露<br>浓缩修护
                        强韧如初<br>¥1720 起 / 3
                        种规格</h3>
                </div>
            </div>
            <div class="row">
                <div class="row row-no-gutters">
                    <div class="col-xs-6">
                        <h2
                            style="color:#000;font-size: 60px;line-height: 80px;margin-left:20px;margin-bottom: 20px;text-decoration: none;margin-top: 100px;">
                            REPAIR.<br>REJUVENATE. RENEW.</h2>
                        <h4 style="color:#000;width: 400px;font-size: 20px;line-height: 29px;margin-left:20px;
                            margin-bottom: 48px;text-align: justify;">
                            根源修护 共愈新生</h4>
                    </div>
                    <div class="col-xs-6">
                        <img src="images/banner1.png" alt=""
                            style="margin-left: 35px;margin-bottom: 80px;margin-top: 50px;;width: 100%;">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="row row-no-gutters">
                    <div class="col-xs-6">
                        <img src="images/banner2.jpg" alt=""
                            style="margin-left: 35px;margin-bottom: 80px;margin-top: 50px;;width: 100%;">
                    </div>
                    <div class="col-xs-6">
                        <h2 style="color:#000;font-size: 60px;line-height: 80px;margin-left:50px;margin-bottom:
                            20px;text-decoration: none;margin-top: 100px;">
                            LET’S TAKE THE<br>OCEAN TO HEART</h2>
                        <h4 style="color:#000;width: 400px;font-size: 20px;line-height: 29px;margin-left:50px;
                            margin-bottom: 48px;text-align: justify; ma">
                            蔚蓝永续 共愈新生</h4>
                    </div>

                </div>
            </div>
            <div class="row">
                <div class="col-lg-3"></div>
                <div class="col-lg-6" style="margin-right: auto;margin-left:110px;">
                    <h1 style="margin-top: 50px;">官网臻享 奢宠服务</h1>
                    <p>作为LA MER尊贵的客人，我们为您呈现奢华的服务体验</p>
                </div>
                <div class="col-lg-3"></div>
            </div>
            <div class="row" style="background-color: #fff;">
                <div class="col-lg-4">
                    <img src="images/1.png" alt="" style="margin-top:20px;">
                    <h3 style="margin-top:10px;margin-left:150px;color: #000;">生日礼遇</h3>
                </div>
                <div class="col-lg-4">
                    <img src="images/2.png" alt="" style="margin-top:20px;">
                    <h3 style="margin-top:-30px; margin-left:150px;color: #000;">臻美奢华礼盒</h3>
                </div>
                <div class="col-lg-4">
                    <img src="images/3.png" alt="" style="margin-top:20px;">
                    <h3 style="margin-top:10px; margin-left:150px;color: #000;">安心免邮派送</h3>
                </div>
            </div>
            <div class="row" style="margin-top:15px ;">
                <div class="col-lg-3"></div>
                <div class="col-lg-6">
                    <h1 style="margin-left: 240px;">赋活滋养</h1>
                    <p style="margin-left: 240px;">璀璨旅途，奢想一路焕变</p>
                </div>
                <div class="col-lg-3"></div>
            </div>
            <div class="row" style="background-color: #fff;">
                <div class="col-lg-4">
                    <img src="images/4.png" alt="" style="margin-top:20px;">
                </div>
                <div class="col-lg-4">
                    <img src="images/5.png" alt="" style="margin-top:20px;">
                </div>
                <div class="col-lg-4">
                    <img src="images/6.png" alt="" style="margin-top:20px;">
                </div>
            </div>
            <!--内容结束-->
            <!--第四部分：底部footer开始-->
            <footer class="bg-dark text-light text-center">
                <div class="container" style="background-color: #044C3C;width: 100%;height: 80px;margin-top: 50px;">
                    <p class="m-1" style="margin-top: 40px;color: #fff;">©La Mer Technology,lnc.</p>
                </div>
            </footer>
            <!--第四部分：底部footer结束-->

            <!--第五部分：返回顶部开始-->
            <div style="display:none;" id="rocket-to-top">
                <div style="opacity: 0;display:block" class="level-2"></div>
                <div class="level-3"></div>
            </div>

            <div>
                <a href="javascript:;" id="back" title="回到顶部" class="back"></a>
            </div>
            <!--第五部分：返回顶部结束-->




        </div>

        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="js/script.js"></script>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>

</html>